<%@ page contentType="text/html; charset=utf-8" %>
<%
String  url			= (String) request.getServerName().trim().replace("http://", "");
%>
<!-- 
<jsp:include page="/mobile/common/head.jsp"></jsp:include>
 -->
<script>
function checkForm() {
	try {
		if ($.trim($('#id').val()) == "" ||
			$.trim($('#pwd').val()) == ""
			) {
				alert("Please enter all fields");
				return false;
			}else{
				document.mainform.action="main.jsp";
			}
	} catch (e) {
		alert(e);
		return false;
	}
	
}
</script>
<!-- 
<body>
	
    <div data-role="page" id="page_main"  >
    
        <div data-role="header"  data-backbtn="false" >
		<h1>로그인</h1>
        </div>
        <div data-role="content"   data-theme="c">
        <form name="mainform" action="javascript:checkForm()" method="post" >
        	 <div data-role="fieldcontain">
              		<label for="id">아이디</label>
              		<input type="text" name="id" id="id" value=""  placeholder="아이디입력하세요."/>
                   
                    <label for="pwd">비밀번호</label>
              		<input type="password" name="pwd" id="pwd" placeholder="password(4~8자)"  />
              		<h3 id="notification"></h3>
                    <button data-theme="b" id="submit" type="submit" >확인</button>
             </div> 
        </form>                  
      	</div>
    
    
    	<div data-role="footer" data-theme="a" data-position="fixed">
            <h1>Smart Mobile.</h1>
        </div>
        
    </div>    
</body>
 -->
 <script>
 
 function on_Load()
 {
  this.key   = document.getElementById("k");
  this.value   = document.getElementById("v");
  this.entries = document.getElementById("entries");
  window.addEventListener("storage", on_Storage, false);
  
  this.showAll();
 }
 
 function on_Storage(event)
 {
  alert( "키 :"+event.key+
    " 이전 값:"+event.oldValue+
    " 지금 값:"+event.newValue);
  showAll();
 }
 
 
 function showAll()
 {
  // 목록을 클리어  
  entries.innerHTML  ="";
  //루프를 이용하여 스토리지 내용을 확인.
  for(var i=0;i<localStorage.length;i++)
  {
   var k=localStorage.key(i);
   
   entries.options[entries.options.length] 
    = new Option(k +":"+localStorage[k], k);
  }  
 }
 
 // ㅑ스토리지에 값을 저장.
 function save()
 {
  localStorage[key.value]=value.value;
  showAll();
 }
 
 
 // 스토리지로부터 값을 삭제.
 function remove()
 {
  delete localStorage[key.value];
  showAll();
 }
 
 // 선택된 엔트리를 텍스트 필드에 표시
 function onEntrySelected()
 {
  
  var selectedOption  =entries.options[entries.selectedIndex];
  key.value    =selectedOption.value;
  value.value    = localStorage[selectedOption.value];
 }
</script>
</head>
<body onLoad="on_Load()">
    <h1>로컬 스토리지 뷰어</h1>
    
    키 : <input type="text" name="k" id="k"> 값 : <input type="text" name="v" id="v">
    <button onClick="save()">저장</button>
    <button onClick="remove()">삭제</button>
    <button onClick="window.open(location.href);">윈도우생성</button>
    <hr>
    <select id="entries" size=5 onchange="onEntrySelected()" style="width:200px">
    </select>
    <button onClick="showAll()"> 다시표시</button>
</body> 
 
</html>
